import React, { useState, useEffect, useContext } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { AppState } from "../App";
import "../css/forusDetails.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faDonate } from "@fortawesome/free-solid-svg-icons";

const Usdetails = () => {
  const App = useContext(AppState);
  const navigate = useNavigate();
  const { id } = useParams();
  const [requestData, setRequestData] = useState(null);
  const [donors, setDonors] = useState([]);
  const [donationAmounts, setDonationAmounts] = useState([]);
  const [currentAddress, setCurrentAddress] = useState("");

  useEffect(() => {
    const fetchData = async () => {
      try {
        const request = await App.Foundationcontract.userrequestions(id);
        setRequestData(request);
        const [donors, amounts] =
          await App.Foundationcontract.getRequestDonations(id);
        setDonors(donors);
        setDonationAmounts(amounts);
      } catch (error) {
        console.error("Error fetching request data:", error);
      }
    };

    if (App.Foundationcontract && id) {
      fetchData();
    }
  }, [App.Foundationcontract, id, currentAddress]);

  useEffect(() => {
    const getAddress = async () => {
      try {
        const accounts = await window.ethereum.request({
          method: "eth_requestAccounts",
        });
        setCurrentAddress(accounts[0]);
      } catch (error) {
        console.error("Error fetching current account address:", error);
      }
    };

    getAddress();
  }, []);
  const BackToForUs = () => {
    navigate("/header/forus");
  };

  return (
    <div className="UsMainDiv">
      {requestData && (
        <>
          <div className="UsLeftDiv">
            <div className="UsLeftContent">
              <div className="UstopImg">
                <img
                  src={`https://blush-chemical-hedgehog-894.mypinata.cloud/ipfs/${requestData.photo}`}
                  alt="捐款图片"
                />
                <div className="UstopRImg">
                  <FontAwesomeIcon icon={faDonate} className="fa-donate" />
                </div>
              </div>
              <h1>{requestData.description}</h1>
              <div className="Usdonate-btn">
                <button type="button" className="Usbtn">
                  立即捐款
                </button>
                <button type="button" className="Backbtn" onClick={BackToForUs}>
                  返回页面
                </button>
              </div>
            </div>
          </div>
          <div className="UsdetailDiv">
            <div className="Usdescribe">
              <p>{requestData.moredescription}</p>
            </div>
            <div className="Usrecord">
              <div className="Usdonation-info">
                <h2>捐款记录</h2>
                <ul>
                  {donors.length > 0 ? (
                    donors.map((donor, index) => (
                      <li
                        key={index}
                      >用户---{`${donor} - ${donationAmounts[index]} WEI`}</li>
                    ))
                  ) : (
                    <li>暂无捐款记录</li>
                  )}
                </ul>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export default Usdetails;
